<script>
import {triggerRef} from "vue";

export default {
  name: "FormExamplePage",
  data() {
    return {
      data: {
        use_name: null,
        use_password: null,
        subject: null,
        gender: null,
        date: null
      },
        rules: {
          use_name: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          use_password:[
            {required:true, message:'密码不能为空',trigger:'blur'},
            {min:5 , max:10 , message: '密码在5-10个字符',trigger:'blur'}
          ]
        }

    }
  }
}
</script>

<template>
  <div >
    <el-card style="width: 600px;margin: 20px auto">
      <div slot="header">
      <span>表单基础用法</span>
      </div>
      <div>
        <el-form :rules="rules" :model="data" >
          <el-form-item label="姓名" prop="use_name">
            <el-input placeholder="请输入您的姓名" v-model="data.use_name"/>
          </el-form-item>
          <el-form-item label="密码" prop="use_password">
            <el-input type="password" show-password placeholder="请输入您的密码" v-model="data.use_password"/>
          </el-form-item>
          <el-form-item label="专业">
            <el-select v-model="data.subject" style="width: 100%">
              <el-option label="软件工程" value="1"/>
              <el-option label="通信工程" value="2"/>
              <el-option label="网络工程" value="3"/>
              <el-option label="计算机科学与技术" value="4"/>
              <el-option label="物联网工程" value="5"/>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="data.gender">
              <el-radio label="M">男</el-radio>
              <el-radio label="F">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
                type="data"
                style="width: 100%"
                value-format="yyyy-mm-dd"
                v-model="data.date"
            />
          </el-form-item>
          <el-form-item>
            <template >
              <el-button type="primary">重置</el-button>
              <el-button type="success">提交</el-button>
            </template>
          </el-form-item>


        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped>

</style>